<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <aside>
    <h1>Logo</h1>
    <nav>
      <a href="">CSS</a>
      <a href="">HTML</a>
      <a href="">JavaScript</a>
      <a href="">React</a>
      <a href="">Vue</a>
    </nav>
  </aside>
  <main>
    <div class="section">
      <div class="section__heading">
        <h3 class="section__title">现代web布局</h3>
      </div>
      <div class="section__body">
        <ul class="cards">
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=11" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=23" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=32" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=1" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=2" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=3" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=43" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=35" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=36" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=63" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
          <li class="card">
            <div class="card__media">
              <img src="https://picsum.photos/222/?random=38" alt="">
              <div class="card__badge">CSS</div>
            </div>
            <div class="card__content">
              <div class="card__heading">
                <h4 class="card__title">CSS Grid Layout</h4>
              </div>
              <div class="card__des">使用 CSS Grid 构建 Web 布局</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>
</div>
</template>

<style scoped lang="scss">
.wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: fit-content(250px) 1fr;
  grid-template-areas: "sidebar main";


  width: 100vw;
  min-height: 100vh;

  background-color: #557;
  font-family: "Exo", Arial, sans-serif;

  main,
  aside {
    background-color: #f3f4f4;
  }

  aside {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 20px;

    h1 {
      margin: 0;
      color: #000;
    }

    nav {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
      grid-area: sidebar;

      a {
        display: block;
        padding: 10px 0;
        text-decoration: none;
        font-size: clamp(1rem, 1.25rem + 2vw, 1.5rem);
      }
    }
  }

  main {
    grid-area: main;
    .section {
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow: hidden;
      resize: horizontal;

      .section__heading {
        display: flex;
        align-items: center;
        color: #333;
        margin-bottom: 24px;

        .section__title {
          font-size: 32px;
          font-weight: 500;
        }
      }
      .section__body {
        .cards {
          --gap: 18px;
          --minwidth: 220px;

          display: grid;
          grid-template-columns:  repeat(
            auto-fit,
            minmax(min(100%, var(--minwidth)), 1fr));
          gap: var(--gap);

          .card {
            background-color: #fff;
            border-radius: 12px;
            display: flex;
            flex-direction: column;

            .card__media {
              position: relative;
              border-radius: 12px 12px 0 0;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 14px;
              min-height: 220px;

              img {
                max-width: 100%;
                height: auto;
                vertical-align: top;
              }

              .card__badge {
                position: absolute;
                background-image: linear-gradient(90deg, #ff5000 0%, #ff0552 99%);
                border-radius: 4px;
                color: #fff;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                padding: 2px 4px;
                font-size: 20px;
                font-weight: 700;
                line-height: 1;
                left: 20px;
                top: 20px;
              }
            }

            .card__content {
              display: flex;
              flex-direction: column;
              padding: 0 14px 24px;

              .card__heading {

                .card__title {
                  font-weight: 500;
                  font-size: 24px;
                  color: #333;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin-bottom: 8px;
                }
              }
              .card__des {
                font-size: 14px;
                color: #ba9663;
              }
            }
          }
        }
      }
    }
  }
}
</style>
